import { h, fragment } from '@knno/dom/jsx';
import { Foldable } from '@knno/ui/jsx/foldable';
import { Button } from '@knno/ui/jsx/button';
import { Toast } from '@knno/ui/toast';

export function ShowFoldable() {
	let foldable: Foldable;
	return (
		<>
			<h1>折叠组件</h1>
			<Button
				onclick={() => {
					foldable.toggle();
				}}
			>
				普通
			</Button>
			<Foldable
				ref={(f) => (foldable = f)}
				onfoldchanged={(e) => {
					Toast.show(`展开状态：${e.detail.expanded}`);
				}}
			>
				<p>内容，行 1</p>
				<p>内容，行 2</p>
				<p>内容，行 3</p>
				<p>内容，行 4</p>
				<p>内容，行 5</p>
			</Foldable>
		</>
	);
}
